<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>五角星评分案例</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			.comment {
				font-size: 40px;
				color: #ff16cf;
			}
			.comment li {
				float: left;
			}
			ul {
				list-style: none;
			}
		</style>
		<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//1.给li注册鼠标经过事件,让自己和前面所有的兄弟都变成实心
				var wjx_k = "☆";
				var wjx_s = "★";
				$(".comment>li").on("mouseenter",function(){
					$(this).text(wjx_s).prevAll().text(wjx_s);
					$(this).nextAll().text(wjx_k);
				});
				//2.给ul注册鼠标离开事件,让所有的li都变成空心
				$(".comment").on("mouseleave",function(){
					$(this).children().text(wjx_k);
					//在做一件事,找到current,让current和current前面的变成实心就行.
					$("li.current").text(wjx_s).prevAll().text(wjx_s);
				});
				//3.给li注册点击事件
				$(".comment>li").on("click",function(){
					$(this).addClass("current").siblings().removeClass("current");
				});
			});
		</script>
	</head>
	<body>
		<ul class="comment">
			<li>☆</li>
			<li>☆</li>
			<li>☆</li>
			<li>☆</li>
			<li>☆</li>
		</ul>
	</body>
</html>